<template>
  <!-- :style="{ background: t('color2') }" -->
  <view class="message-page">
    <!-- 顶部统计区域 -->
    <view class="stats-container">
      <view class="stat-item" @tap="goto" data-url="/pagesEchart/find/likes">
        <view class="stat-item-box">
          <view class="stat-number" v-if="likes">{{
            likes > 99 ? "99+" : likes
          }}</view>
          <view class="stat-icon">
            <image
              class="stat-icon-img"
              src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250410/de0fb06ed544f7d77bdf74a339c256c3.png"
              mode=""
            ></image>
          </view>
        </view>
        <view class="stat-text">赞和收藏</view>
      </view>
      <view class="stat-item" @tap="goto" data-url="/pagesEchart/find/follow">
        <view class="stat-item-box">
          <view class="stat-number" v-if="follow">{{
            follow > 99 ? "99+" : follow
          }}</view>
          <view class="stat-icon">
            <image
              class="stat-icon-img"
              src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250412/c2d37ba7ff476acf4cfe05471dcfa29e.png"
              mode=""
            ></image>
          </view>
        </view>
        <view class="stat-text">新增关注</view>
      </view>
      <view
        class="stat-item"
        @tap="goto"
        data-url="/pagesEchart/find/commentlist"
      >
        <view class="stat-item-box">
          <view class="stat-number" v-if="comment">{{
            comment > 99 ? "99+" : comment
          }}</view>
          <view class="stat-icon">
            <image
              class="stat-icon-img"
              src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250412/64dbc57ad38cef3b96c32510ddaa5145.png"
              mode=""
            ></image>
          </view>
        </view>
        <view class="stat-text">评论和@</view>
      </view>
    </view>

    <!-- 消息列表区域 -->
    <view class="message-list">
      <view
        class="message-item"
        @click="toChat(item)"
        v-for="(item, index) in datalist"
        :key="index"
      >
        <image class="avatar" :src="item.headimg" mode="aspectFill"></image>
        <view class="message-content">
          <view class="message-title">
            <text>{{ item.nickname }}</text>
            <text class="message-title-text">{{ getType(item.type) }}</text>
          </view>
          <view class="message-subtitle">{{
            item.new_message_log ? coverMsgType(item.new_message_log) : ""
          }}</view>
          <view class="message-time">{{
            item.new_message_log && item.new_message_log.date
          }}</view>
        </view>
        <view class="message-badge" v-if="item.no_read_count">{{
          item.no_read_count
        }}</view>
      </view>
      <nomore text="没有更多内容了" v-if="nomore"></nomore>
    </view>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      likes: 0,
      follow: 0,
      comment: 0,
      datalist: [
        // {
        //   id: 1,
        //   headimg:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   nickname: "官方",
        //   type: 1,
        //   uptime: "2023-07-20 10:00:00",
        // }
      ],
      page: 1,
      limit: 10,
      nomore: false,
      canload: true,
      isFirstShow: true,
    };
  },

  onShow() {
    // 避免首次进入页面触发 onShow 事件
    if (this.isFirstShow) {
      this.isFirstShow = false;
      return;
    }
    this.getCount();
    this.datalist = [];
    this.page = 1;
    this.nomore = false;
    this.canload = true;
    this.getlist();
  },

  onLoad() {
    this.getCount();
    this.getlist();
    uni.$on("socketMessage-api", this.handleCount);
  },
  beforeDestroy() {
    uni.$off("socketMessage-api", this.handleCount);
  },
  onPullDownRefresh: function () {
    this.getCount();
    this.datalist = [];
    this.page = 1;
    this.getlist();
  },
  onReachBottom: function () {
    console.log("触底");
    if (this.canload) {
      this.page++;
      this.getlist();
    }
  },
  methods: {
    getCount() {
      app.showLoading("加载中");
      app.sendSocketMessage({
        type: "api",
        api_path: "Message/getcount",
      });
    },

    getlist() {
      app.showLoading("加载中");
      app.sendSocketMessage({
        type: "api",
        api_path: "Chat/getchatlist",
        page: this.page,
        limit: this.limit,
      });
    },

    handleCount(data) {
      var that = this;
      that.loaded();
      if (data.api_path == "Message/getcount") {
        console.log("getcount", data.data);
        if (data.data) {
          this.likes = data.data.count1;
          this.follow = data.data.count2;
          this.comment = data.data.count3;
        }
      }
      if (data.api_path == "Chat/getchatlist") {
        console.log("getchatlist", data.data);
        if (data.data && data.data.length > 0) {
          this.datalist = this.datalist.concat(data.data);
        } else {
          this.nomore = true;
          this.canload = false;
        }
      }
    },

    toChat(item) {
      //联系人类型 1官方 2好友 3陌生人 4 客服
      if (item.type == 1) {
        app.goto(
          "/pagesChat/chat/index?id=" +
            item.admin_user_id +
            "&type=" +
            item.type +
            "&name=" +
            item.nickname +
            "&headimg=" +
            item.headimg
        );
      } else {
        app.goto(
          "/pagesChat/chat/index?id=" +
            item.mid +
            "&type=" +
            item.type +
            "&name=" +
            item.nickname +
            "&headimg=" +
            item.headimg
        );
      }
    },

    //联系人类型 1官方 2好友 3陌生人
    getType(type) {
      switch (type) {
        case 1:
          return "官方";
        case 2:
          return "好友";
        case 3:
          return "陌生人";
      }
    },

    coverMsgType(obj) {
      switch (obj.msg_type) {
        case 1:
          return obj.content;
        case 2:
          return "[图片]";
        case 3:
          return "[视频]";
        case 5:
          return "[商品]";
        case 15:
          return "[图文]";
        case 16:
          return "[订单]";
        default:
          return obj.content;
      }
    },
  },
};
</script>

<style lang="scss">
.message-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20rpx;
}

.stats-container {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
  background-color: #ffffff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.stat-item {
  text-align: center;

  .stat-item-box {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130rpx;
    height: 130rpx;
    position: relative;
    margin-bottom: 10rpx;
    background-color: #f5f7fa;
  }

  .stat-number {
    font-size: 32rpx;
    color: #333;
    position: absolute;
    right: 0;
    top: 0;
    color: #f5f7fa;
    background-color: #ff0000;
    // border-radius: 50%;
    border-radius: 20rpx;
    min-width: 45rpx;
    height: 45rpx;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
  }

  .stat-icon {
    margin: 10rpx 0;
    width: 50rpx;
    height: 50rpx;

    .stat-icon-img {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .stat-text {
    font-size: 24rpx;
    color: #666;
  }
}

.message-list {
  background-color: #ffffff;
  border-radius: 12rpx;
}

.message-item {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  border-bottom: 1rpx solid #eee;
  position: relative;

  .message-icon,
  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .avatar-icon {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
  }
  .message-content {
    flex: 1;

    .message-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 6rpx;
      .message-title-text {
        border: 1px solid #ff0000;
        border-radius: 10rpx;
        padding: 4rpx 6rpx;
        font-size: 24rpx;
        margin-left: 10rpx;
      }
    }

    .message-subtitle {
      font-size: 24rpx;
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 70vw;
    }

    .message-time {
      font-size: 24rpx;
      color: #999;
      position: absolute;
      right: 20rpx;
      top: 10rpx;
    }
  }

  .message-badge {
    background-color: #ff0000;
    color: #ffffff;
    font-size: 24rpx;
    padding: 2rpx 12rpx;
    border-radius: 20rpx;
    position: absolute;
    right: 20rpx;
    top: 70rpx;
  }
}
</style>
